<template autoRoute="true">
  <el-row style="height: 100%; border: 1px solid #e5e7eb">
    <el-col :span="4">
      <ProjectRoleList
        ref="ProjectRoleListRef"
        v-if="route.query.projectId"
        :projectId="route.query.projectId as string"
        @getRolePermission="getRolePermission"
      ></ProjectRoleList>
    </el-col>
    <el-col :span="20">
      <ProjectRoleSetting
        ref="ProjectRoleSettingRef"
        v-if="currentRoleId"
        :roleId="currentRoleId"
        @refresh="refresh"
      ></ProjectRoleSetting>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
  import { useRoute, useRouter } from "vue-router";
  import { ref, onMounted, nextTick } from "vue";
  import ProjectRoleList from "@/views/pm/components/projectRoleList.vue";
  import ProjectRoleSetting from "@/views/pm/components/projectRoleSetting.vue";
  import type { projectRoleVo } from "@/interface/pm/projectRole.ts";

  const route = useRoute();
  const router = useRouter();
  const currentRoleId = ref("");
  const ProjectRoleSettingRef = ref(null);
  const ProjectRoleListRef = ref(null);

  const getRolePermission = (roleInfo: projectRoleVo) => {
    console.log("getRolePermission", roleInfo);
    currentRoleId.value = roleInfo?.id || "";
    nextTick(() => {
      ProjectRoleSettingRef.value?.getRoleSettings();
    });
  };
  const refresh = () => {
    ProjectRoleListRef.value?.getList();
  };
  onMounted(() => {
    // getProjectOverview();
  });
</script>

<style lang="scss">
  .role-popper {
    padding: 4px !important;
    .rename,
    .delete {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 8px;
      cursor: pointer;
      &:hover {
        background: #f0f2fa;
        border-radius: 4px;
      }
    }
    .delete span {
      color: #d54941;
    }
  }
</style>

<style scoped lang="scss">
  .role-permissions-container {
    display: flex;
    height: 100%;
    .role-permissions-left {
      width: 191px;
      border-right: 1px solid #e6e6e6;
      padding: 12px 8px;
      box-sizing: border-box;
      .text {
        font-weight: 600;
        font-size: 16px;
        padding-left: 18px;
        line-height: 24px;
      }
      &-wapper {
        margin-top: 12px;
        border: none;
        .item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          .btn {
            padding: 3px;
            border-radius: 4px;
            background-color: rgba(0, 0, 0, 0.1);
            align-items: center;
            justify-content: center;
            display: none;
          }
        }
        :deep(.el-menu-item) {
          display: flex;
          gap: 6px;
          width: 175px;
          line-height: 40px;
          height: 40px;
          padding: 0 8px 0 18px;
        }
        :deep(.el-menu-item .icon) {
          /* 默认颜色 #5E5E5E */
          filter: invert(42%) sepia(0%) saturate(2%) hue-rotate(349deg)
            brightness(96%) contrast(89%);
        }
        :deep(.el-menu-item.is-active .icon) {
          /* 激活颜色 #1AA1FB */
          filter: invert(23%) sepia(97%) saturate(2871%) hue-rotate(212deg)
            brightness(98%) contrast(105%);
        }
        :deep(.el-menu-item:hover) {
          background: #f0f2fa;
          border-radius: 4px;
          .btn {
            display: flex;
          }
        }
        :deep(.el-menu-item.is-active) {
          color: #1aa1fb;
          background: #e6ecff;
          border-radius: 4px;
        }
        :deep(.el-menu-item.is-active span) {
          font-weight: 500;
        }
      }
    }
    .role-permissions-right {
      flex: 1;
      padding: 12px 8px;
      box-sizing: border-box;
      .text {
        font-weight: 600;
        font-size: 16px;
        padding-left: 18px;
        line-height: 24px;
      }
      .permission-title {
        font-weight: 500;
        font-size: 16px;
        line-height: 100%;
        margin-top: 16px;
        &::before {
          content: "";
          display: inline-block;
          width: 4px;
          height: 16px;
          margin-left: 18px;
          background: #1aa1fb;
          margin-right: 4px;
          vertical-align: bottom;
        }
      }
      .permission-card {
        padding: 12px;
        margin-top: 12px;
        margin-left: 18px;
        background: #fafafa;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        .group {
          display: flex;
          flex-direction: column;
          gap: 4px;
          .name {
            font-weight: 500;
            font-size: 14px;
            color: #000 !important;
          }
        }
      }
    }
  }
</style>
